<template>
	<div class="audit-content detailBoxStyle ">
            <div class="block">
                <div class="contentBox mt30 name">代理账号信息</div>
                <el-table
                    v-loading="loading"
                    element-loading-spinner="el-icon-loading"
                    size="mini"
                    class="small-size-table"
                    :data="[1]"
                    style="width: 100%; margin: 15px 0"
                    :header-cell-style="getRowClass"
                    highlight-current-row
                >
                    <el-table-column
                        prop="userName"
                        align="center"
                        label="代理账号"
                    >
                        <template>
                            {{ proxyAccountInfo.userName }}
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="userName"
                        align="center"
                        label="代理层级"
                    >
                        <template>
                            {{ proxyAccountInfo.proxyLevel }}
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="userName"
                        align="center"
                        label="直属上级"
                    >
                        <template>
                            {{ proxyAccountInfo.parentProxyName || '-' }}
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="userName"
                        align="center"
                        label="所属总代"
                    >
                        <template>
                            {{ proxyAccountInfo.topProxyName }}
                        </template>
                    </el-table-column>
                    <el-table-column
                        align="center"
                        :label="`${$t('common.belong_merchant')}`"
                        prop="merchantName"
                    >
                        <template>
                            {{ proxyAccountInfo.merchantName || '-' }}
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="userName"
                        align="center"
                        label="业务模式"
                    >
                        <template>
                            {{
                                mappingBusinessModel(
                                    proxyAccountInfo.businessModel
                                )
                            }}
                        </template>
                    </el-table-column>
                    <el-table-column
                        key="accountStatus"
                        prop="accountStatus"
                        align="center"
                        :label="$t('common.account_status')"
                        min-width="115"
                    >
                        <template>
                            <span
                                v-if="!!proxyAccountInfo.paymentLockStatus"
                                class="deleteRgba"
                            >
                                {{ $t('agent.charge_lock') }}
                                <br />
                            </span>
                            <span v-if="false">
                                {{ $t('agent.login_lock') }}：
                            </span>
                            <span
                                v-if="!!proxyAccountInfo.loginLockStatus"
                                class="disableRgba"
                            >
                                {{ $t('agent.login_lock') }}
                            </span>
                            <span
                                v-if="!!proxyAccountInfo.gameLockStatus"
                                class="lockingRgba"
                            >
                                {{ $t('agent.game_lock') }}
                            </span>
                            <span
                                v-if="
                                    proxyAccountInfo.loginLockStatus ===
                                        0 &&
                                    proxyAccountInfo.paymentLockStatus === 0
                                "
                                class="normalRgba"
                            >
                                {{ $t('agent.normal') }}
                            </span>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="userName"
                        align="center"
                        label="注册时间"
                    >
                        <template>
                            {{ proxyAccountInfo.createdAt || '-' }}
                        </template>
                    </el-table-column>
                </el-table>
             </div>
             <div class="block">
                <div class="name d-flex">
                    <span>
                        {{
                            dayjs(
                                String(detailData.cycleStartDate),
                                'YYYYMMDD'
                            ).format('YYYY-MM-DD')
                        }}
                        至
                        {{
                            dayjs(
                                String(detailData.cycleEndDate),
                                'YYYYMMDD'
                            ).format('YYYY-MM-DD')
                        }}
                        佣金统计
                    </span>
                </div>
                <el-table
                    v-loading="loading"
                    element-loading-spinner="el-icon-loading"
                    size="mini"
                    class="small-size-table"
                    :data="[detailData]"
                    style="width: 100%; margin: 15px 0"
                    :header-cell-style="getRowClass"
                    highlight-current-row
                >
                    <el-table-column
                        prop="userName"
                        align="center"
                        label="佣金状态"
                    >
                        <template slot-scope="scope">
                            <span
                                v-if="scope.row.payoutStatus === 6"
                                class="disableRgba"
                            >
                                已取消
                            </span>
                            <span
                                v-if="scope.row.payoutStatus === 3"
                                class="normalRgba"
                            >
                                已发放
                            </span>
                            <span
                                v-if="scope.row.payoutStatus === 1"
                                class="lockingRgba"
                            >
                                待发放
                            </span>
                            <span
                                v-if="scope.row.payoutStatus === 5"
                                class="deleteRgba"
                            >
                                无收益
                            </span>
                            <span
                                v-if="scope.row.payoutStatus === 0"
                                class="deleteRgba"
                            >
                                未结算
                            </span>
                            <span
                                v-if="scope.row.payoutStatus === 2"
                                class="deleteRgba"
                            >
                                待领取
                            </span>
                            <span
                                v-if="scope.row.payoutStatus === 4"
                                class="deleteRgba"
                            >
                                超时未领取
                            </span>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="userName"
                        align="center"
                        label="德州服务费贡献分成"
                    >
                        <template slot-scope="scope">
                            <span>
                                {{
                                    handleTotalNumber(
                                        'USDT',
                                        scope.row.clubPartsAmount
                                    )
                                }}
                            </span>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="userName"
                        align="center"
                        label="德州保险分成"
                    >
                        <template slot-scope="scope">
                            {{
                                handleTotalNumber(
                                    'USDT',
                                    scope.row.insurePartsAmount
                                )
                            }}
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="userName"
                        align="center"
                        label="德州增值服务消费分成"
                    >
                        <template slot-scope="scope">
                            {{
                                handleTotalNumber(
                                    'USDT',
                                    scope.row.clubValueAddedPartsAmount
                                )
                            }}
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="userName"
                        align="center"
                        label="其他场馆佣金"
                    >
                        <template slot-scope="scope">
                            {{
                                handleTotalNumber(
                                    'USDT',
                                    scope.row.otherCommissionRate
                                )
                            }}
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="userName"
                        align="center"
                        label="上期结余"
                    >
                        <template slot-scope="scope">
                            <p
                                :style="
                                    handleNumberColor(
                                        scope.row.lastMonthBalance
                                    )
                                "
                            >
                                <span>
                                    {{
                                        handleTotalNumber(
                                            'USDT',
                                            scope.row.lastMonthBalance
                                        )
                                    }}
                                </span>
                            </p>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="userName"
                        align="center"
                        label="综合佣金"
                    >
                        <template slot-scope="scope">
                            {{
                                handleTotalNumber(
                                    'USDT',
                                    scope.row.commissionAmount
                                )
                            }}
                        </template>
                    </el-table-column>
                </el-table>
             </div>
            <div class="block">
                <div class="name">团队返佣明细</div>
                <!-- 德州俱乐部 -->
                <el-table
                    v-loading="loading"
                    element-loading-spinner="el-icon-loading"
                    size="mini"
                    class="small-size-table"
                    :data="incomeAuditDetail1"
                    style="width: 100%; margin: 15px 0"
                    :header-cell-style="getRowClass"
                    highlight-current-row
                >
                    <el-table-column
                        prop="userName"
                        align="center"
                        label="项目"
                        width="150"
                    >
                        德州俱乐部
                    </el-table-column>
                    <el-table-column
                        prop="userName"
                        align="center"
                        label="会员服务费贡献"
                        width="150"
                    >
                        <template slot-scope="scope">
                            <el-link
                                class="lightBlueColor"
                                type="primary"
                                @click="amountDialog('ServicecCntribuerDialog')"
                            >
                                {{
                                    handleTotalNumber(
                                        'USDT',
                                        scope.row.validBetAmount
                                    )
                                }}
                            </el-link>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="userName"
                        align="center"
                        label="团队分成比例"
                        width="150"
                    >
                        <template slot-scope="scope">
                            {{ scope.row.teamPartsRate }}%
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="userName"
                        align="center"
                        label="团队分成金额"
                        width="150"
                    >
                        <template slot-scope="scope">
                            {{
                                handleTotalNumber(
                                    'USDT',
                                    scope.row.teamPartsAmount
                                )
                            }}
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="userName"
                        align="center"
                        label="下级会员返水"
                        width="150"
                    >
                        <template slot-scope="scope">
                            {{
                                handleTotalNumber(
                                    'USDT',
                                    scope.row.rebateAmount
                                )
                            }}
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="userName"
                        align="center"
                        label="德州服务费贡献分成"
                        width="150"
                    >
                        <template slot-scope="scope">
                            {{
                                handleTotalNumber(
                                    'USDT',
                                    scope.row.incomeAmount
                                )
                            }}
                        </template>
                    </el-table-column>
                </el-table>
                <el-table
                    v-loading="loading"
                    element-loading-spinner="el-icon-loading"
                    size="mini"
                    class="small-size-table"
                    :data="incomeAuditDetail2"
                    style="width: 100%; margin: 15px 0"
                    :header-cell-style="getRowClass"
                    highlight-current-row
                >
                    <el-table-column
                        prop="userName"
                        align="center"
                        label="项目"
                        width="150"
                    >
                        德州保险
                    </el-table-column>
                    <el-table-column
                        prop="userName"
                        align="center"
                        label="会员保险输赢"
                        width="150"
                    >
                        <template slot-scope="scope">
                            {{
                                handleTotalNumber(
                                    'USDT',
                                    scope.row.netAmount
                                )
                            }}
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="userName"
                        align="center"
                        label="团队分成比例"
                        width="150"
                    >
                        <template slot-scope="scope">
                            {{ scope.row.teamPartsRate }}%
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="userName"
                        align="center"
                        label="德州保险分成"
                        width="150"
                    >
                        <template slot-scope="scope">
                            {{
                                handleTotalNumber(
                                    'USDT',
                                    scope.row.teamPartsAmount
                                )
                            }}
                        </template>
                    </el-table-column>
                </el-table>
                <el-table
                    v-loading="loading"
                    element-loading-spinner="el-icon-loading"
                    size="mini"
                    class="small-size-table"
                    :data="incomeAuditDetail4"
                    style="width: 100%; margin: 15px 0"
                    :header-cell-style="getRowClass"
                    highlight-current-row
                >
                    <el-table-column
                        prop="userName"
                        align="center"
                        label="项目"
                        width="150"
                    >
                        德州增值服务
                    </el-table-column>
                    <el-table-column
                        prop="userName"
                        align="center"
                        label="会员增值服务消费"
                        width="150"
                    >
                        <template slot-scope="scope">
                            <el-link
                                class="lightBlueColor"
                                type="primary"
                                @click="amountDialog('ClubAmountDialog')"
                            >
                                {{
                                    handleTotalNumber(
                                        'USDT',
                                        scope.row.validBetAmount
                                    )
                                }}
                            </el-link>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="userName"
                        align="center"
                        label="团队分成比例"
                        width="150"
                    >
                        <template slot-scope="scope">
                            {{ handlePercentage(scope.row.rebateRate) }}
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="userName"
                        align="center"
                        label="德州增值服务消费分成"
                        width="150"
                    >
                        <template slot-scope="scope">
                            {{
                                handleTotalNumber(
                                    'USDT',
                                    scope.row.incomeAmount
                                )
                            }}
                        </template>
                    </el-table-column>
                </el-table>
                <el-table
                    v-loading="loading"
                    element-loading-spinner="el-icon-loading"
                    size="mini"
                    class="small-size-table"
                    :data="incomeAuditDetail2"
                    style="width: 100%; margin: 15px 0"
                    :header-cell-style="getRowClass"
                    highlight-current-row
                >
                    <el-table-column
                        prop="userName"
                        align="center"
                        label="项目"
                        width="150"
                    >
                        其他场馆
                    </el-table-column>
                    <el-table-column
                        prop="userName"
                        align="center"
                        label="会员游戏输赢"
                        width="150"
                    >
                        <template slot-scope="scope">
                            <p>
                                <el-link
                                    class="lightBlueColor"
                                    type="primary"
                                    @click="amountDialog('memberGameDialog')"
                                >
                                    {{
                                        handleTotalNumber(
                                            'USDT',
                                            scope.row.netAmount
                                        )
                                    }}
                                </el-link>
                            </p>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="userName"
                        align="center"
                        label="会员总返水"
                        width="150"
                    >
                        <template slot-scope="scope">
                            <p>
                                <!-- <el-link
                                    class="lightBlueColor"
                                    type="primary"
                                    @click="amountDialog('memberRebateDetail')"
                                > -->
                                    {{
                                        handleTotalNumber(
                                            'USDT',
                                            scope.row.rebateAmount
                                        )
                                    }}
                                <!-- </el-link> -->
                            </p>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="userName"
                        align="center"
                        label="代理净盈亏"
                        width="150"
                    >
                        <template slot-scope="scope">
                            <span
                                :style="
                                    handleNumberColor(
                                        scope.row.validBetAmount
                                    )
                                "
                            >
                                <span>
                                    {{
                                        handleTotalNumber(
                                            'USDT',
                                            scope.row.validBetAmount
                                        )
                                    }}
                                </span>
                            </span>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="userName"
                        align="center"
                        label="佣金比例"
                        width="150"
                    >
                        <template slot-scope="scope">
                            {{ handlePercentage(scope.row.teamPartsRate) }}
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="userName"
                        align="center"
                        label="其他场馆佣金"
                        width="150"
                    >
                        <template slot-scope="scope">
                            {{
                                handleTotalNumber(
                                    'USDT',
                                    scope.row.incomeAmount
                                )
                            }}
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <!-- 审核记录 -->
            <template v-if="isShowAudit">
                <div class="block mb">
                    <p class="name">{{ $t('funds.fund_audit.audit_info') }}</p>
                    <div class="block-content">
                        <el-row :gutter="20">
                            <el-col :span="6">
                                {{ $t('funds.fund_audit.audit_user_1') }}:
                                {{ detailData.audit1Operator || '-' }}
                            </el-col>
                            <el-col :span="6">
                                {{ $t('funds.fund_audit.audit_time_1') }}:
                                {{ detailData.audit1Time || '-' }}
                            </el-col>
                            <el-col :span="12">
                                {{ $t('funds.fund_audit.audit_remark_1') }}:
                                <span class="word_break">
                                    {{ detailData.audit1Desc || '-' }}
                                </span>
                            </el-col>
                        </el-row>

                        <el-row :gutter="20">
                            <el-col :span="6">
                                {{ $t('funds.fund_audit.audit_user_2') }}:
                                {{ detailData.audit2Operator || '-' }}
                            </el-col>
                            <el-col :span="6">
                                {{ $t('funds.fund_audit.audit_time_2') }}:
                                {{ detailData.audit2Time || '-' }}
                            </el-col>
                            <el-col :span="12">
                                {{ $t('funds.fund_audit.audit_remark_2') }}:
                                <span class="word_break">
                                    {{ detailData.audit2Desc || '-' }}
                                </span>
                            </el-col>
                        </el-row>
                    </div>
                </div>
            </template>

        <!-- 增值服务消费明细弹窗 -->
		<component
            :is="amountDialogName"
            :visible.sync="amountDialogVisible"
			:curData="auditDetail"
		/>
	</div>
</template>

<script>
import list from '@/mixins/list'
import dayjs from 'dayjs'
import ClubAmountDialog from '@/components/Funds/Commission/clubAmountDialog.vue'
import ServicecCntribuerDialog from '@/components/Funds/Commission/servicecCntribuerDialog.vue'
import MemberGameDialog from '@/components/Funds/Commission/memberGameDialog.vue'
import MemberRebateDetail from '@/components/Funds/Commission/memberRebateDetail.vue'

export default {
    components: {
        ClubAmountDialog,
        ServicecCntribuerDialog,
        MemberGameDialog,
        MemberRebateDetail
    },
	mixins: [list],
	props: {
		detailData: {
			type: Object,
			required: true
		},
		isShowAudit: {
			type: Boolean,
			default: true
		}
	},
	data() {
		return {
			loading: false,
			accountInfo: {}, // 审核账号信息
            proxyAccountInfo: {},
            dayjs,

            auditDetail: {},
            incomeAuditDetail1: [], // 德州
            incomeAuditDetail2: [], // 保险
            incomeAuditDetail3: [], // 其他
            incomeAuditDetail4: [], // 增值服务
            proxyIncomeList: [],

            amountDialogName: undefined,
            amountDialogVisible: false
		}
	},
	computed: {},
	created() {
		this.getData()
	},
	mounted() {},
	methods: {
        amountDialog(name) {
            this.amountDialogName = name
            this.amountDialogVisible = true
        },
        getData() {
            this.loading = true
            this.$api
                .getProxyDetailQueryDetail({
                    merchantId: this.detailData.merchantId,
                    userName: this.detailData.proxyName
                }).then((res) => {
                    if (res?.code === 200) {
                        this.proxyAccountInfo = res.data || {}
                    }
                })
            this.$api
                .getProxyCommissionCashDetail({
                    id: this.detailData.orderNo
                })
                .then((res) => {
                console.log(res)
                if (res?.data?.length == 0) {
                    this.loading = false
                    this.incomeAuditDetail1 = []
                    this.incomeAuditDetail2 = []
                    this.incomeAuditDetail3 = []
                    this.incomeAuditDetail4 = []
                    this.auditDetail = []
                }
                if (res?.code === 200) {
                    this.loading = false
                    this.auditDetail = res.data
                    const fundsAuditDetailRespList = res.data?.fundsAuditDetailRespList || []
                    fundsAuditDetailRespList.forEach((row) => {
                        this[`incomeAuditDetail${row.rebateType}`] = [row]
                    })
                }
            })
        }
	}
}
</script>

<style lang="scss" scoped>
.audit-content {
	.block {
		padding: 20px 20px 20px 20px;
		.name {
			font-weight: 600;
		}
		.block-content {
			position: relative;
			width: 100%;
			margin-top: 10px;
			word-break: break-all;
		}
	}
	.mb {
		.el-col {
			min-height: 40px;
			margin-bottom: 10px;
		}
	}
}
</style>
